<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link rel="stylesheet" href="css/tabar-style.css"/>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/index.css" />
	<!-- 在线图标样式 -->
	<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
	<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
	<!--百度地图API-->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=T9X7pGGuOkDzpks7QCxrbPHgWYPywp3d"></script>
	<script src="js/map.js"></script>
	<script src="js/app.js"></script>
</head>
<body>
	<!-- 搜索框-->
	<div id="header" onclick="searchPOI()">
		<input  id="header-text" placeholder="请输入关键字" />
	</div>
	<!-- 检索结果框 -->
	<div id="searchResultPanel"></div>
	
	<!--地图容器-->
	<div id="map" class="map"></div>
	
	<!-- 侧边栏 -->
		<div class="layer" id="layer" data-index="1" onclick="convertTraffic()">
			<span class="fa fa-road"></span>
			<br />
			<span class="layer-text">路况</span>
		</div>
		<!-- 卫星图 -->
		<div class="Earthlayer" id="Earthlayer" data-index="1" onclick="convertEarth()">
			<span class="fa fa-globe"></span>
			
			<br />
			<span class="layer-text">卫星图</span>
		</div>
		
	<!-- 周边推荐列表 -->
	<div id="nearPOI" class="nearPOI">
		<div class="min-block" id="food_part">
			<span id="food" value="美食" onclick="SearchFood()">
				<svg t="1617977313284" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2035" width="48" height="48"><path d="M512 1022.39784391c-281.8863104 0-510.39784391-228.51735438-510.39784391-510.40133689S230.11252451 1.60215609 512 1.60215609 1022.39784391 230.11252451 1022.39784391 511.99650702 793.8863104 1022.39784391 512 1022.39784391zM806.4898048 513.87335111c-21.3589925-108.71488626-101.44619179-196.16043008-205.79264285-228.45098894 0.68460544-4.47089323 1.37153991-8.94993635 1.37153992-13.6094447 0-49.73984882-40.32768797-90.06986581-90.06753678-90.06986581-49.74916381 0-90.07335765 40.33001586-90.07335766 90.06986581 0 4.65950834 0.69042745 9.13855147 1.37153991 13.6094447-104.34295808 32.29055886-184.43132245 119.73610269-205.79264284 228.45098894-20.26921301 4.39288491-35.76714354 21.58137344-35.76714354 43.16507478 0 24.86817792 20.16326201 45.03493291 45.03493291 45.0349329l570.44519708 0c24.8716709 0 45.03493291-20.16675499 45.03493291-45.0349329C842.25694834 535.45355947 826.75901781 518.26623602 806.4898048 513.87335111zM812.23327175 662.11372487L211.76556317 662.11372487c-16.58189027 0-30.02367659 13.44411534-30.02367659 30.02600562 0 16.58189027 13.44178631 30.02600562 30.02367659 30.02600562l600.46770858 0c16.58189027 0 30.02367659-13.44411534 30.02367659-30.02600562C842.25694834 675.55784021 828.81516203 662.11372487 812.23327175 662.11372487zM512.00232903 271.81291634c-20.37632797 0-40.20077909 2.22729671-59.4337701 6.10090553-0.20724509-2.03868046-0.61591211-4.0144896-0.6159121-6.10090553 0-33.16378055 26.88590165-60.04386019 60.04968106-60.0438602 33.16145152 0 60.04386019 26.88007965 60.0438602 60.0438602 0 2.08641707-0.40517518 4.06222507-0.61591211 6.10090553C552.20077909 274.04021305 532.37399893 271.81291634 512.00232903 271.81291634zM459.19106958 354.74914645c1.47166891-0.49249735 2.69301419-0.73234205 3.66287189-0.73234204 5.86921187 0 10.89197966 2.09573091 15.05084189 6.29534378 4.16701213 4.19379086 6.25110016 9.24450247 6.25110016 15.16144982 0 3.44980594-0.73583502 6.65278237-2.20983182 9.60194105-1.47166891 2.95381675-3.55226397 5.41979307-6.24760719 7.40724508-2.69301419 1.98395904-5.50012928 3.21229027-8.42716728 3.68965063-13.21591353 3.93881031-25.56791922 9.24100949-37.05834724 15.89495581-11.49275591 6.65278237-22.01565525 14.54088078-31.56403882 23.65265351-9.55071261 9.12108771-17.74734905 19.09793223-24.59224064 29.95149028-0.98499357 2.45549853-2.45549853 4.68046621-4.4103498 6.64696035-1.96067328 1.96998713-4.15769714 3.45213497-6.60504576 4.44644238-2.44036267 0.99430741-5.1345408 1.48913379-8.07671467 1.4891338-5.87270371 0-10.76390798-1.97231616-14.67244657-5.91112647-3.91785245-3.94463118-5.87503275-8.86843506-5.87503275-14.79004046 0-4.42548565 1.22251037-8.36778894 3.66287189-11.82923776l0-0.03958557c13.21591353-21.68615936 29.97593998-40.41151715 50.28008164-56.18305821 20.3053056-15.77154105 42.93920199-27.10828146 67.89470208-34.01604437C457.24320313 354.99830499 458.21888285 354.74914645 459.19106958 354.74914645z" fill="#f4ea2a" p-id="2036"></path></svg>
			</span>
			<span>美食</span>
		</div>
		<div class="min-block" id="viste_part">
			<span id="viste" value="景点" onclick="SearchViste()">
				<svg t="1617977479301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3140" width="48" height="48"><path d="M511.999488 4.375657C231.605404 4.375657 4.375146 231.66629 4.375146 512c0 280.33371 227.229235 507.623319 507.624343 507.623319 280.396131 0 507.624343-227.28961 507.624343-507.623319C1019.623831 231.66629 792.39562 4.375657 511.999488 4.375657zM228.444411 800.142559c0 0 66.9846-169.291684 87.24811-226.670509 20.263509-57.504692 59.177797-146.984632 112.220874-64.198138 52.919257 82.787518 101.253078 241.543242 101.253078 241.543242l12.515035 50.687426L228.444411 800.142559zM610.215394 734.085074l-3.717671-15.368012c0 0-42.756803-140.415007-96.66662-251.085572 38.046524-106.457614 90.099041-248.235664 105.465007-269.427312 25.159006-34.452673 96.297206-90.346681 158.882614 98.897428 78.4487 236.710167 120.521934 436.982446 120.521934 436.982446L610.215394 734.084051z" fill="#1afa29" p-id="3141"></path></svg>
			</span>
			<span>景点</span>
		</div>
		<div class="min-block" id="supermarket_part">
			<span id="supermarket" value="超市" onclick="SearchSupermarket()">
				<svg t="1617977576781" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4640" width="48" height="48"><path d="M496.46554075 381.77754075h14.56355555v14.56355555c0.48545185 5.33997037-2.18453333 8.00995555-8.00995555 8.00995555h-5.82542223v18.93262223h15.29173333c16.99081482 0.48545185 25.2434963-8.00995555 24.75804445-25.48622223v-35.6807111h-83.61908148v19.6608h16.74808888c0.48545185 13.1072-5.33997037 22.81623703-17.47626667 29.1271111V428.25955555c29.4912-6.79632592 44.05475555-22.20942222 43.56930372-46.4820148z" p-id="4641" fill="#1296db"></path><path d="M456.41576297 427.53137778v64.68645925h54.49197036c16.99081482 0.9709037 25.00077037-7.76722963 24.02986667-26.2144v-38.47205925h-78.52183703z m45.14702221 45.14702222h-18.93262221v-25.48622222H509.57274075v16.74808889c0.48545185 6.31087408-2.18453333 9.22358518-8.00995557 8.73813333zM662.24734815 394.15656297h-33.49617778v11.65084444h-56.6765037v100.36717037h30.58346666v-79.25001481h26.2144v96.72628148h33.49617778v-96.72628148h27.67075556v49.39472592c0.48545185 5.82542222-2.18453333 8.73813333-8.00995556 8.73813333h-9.46631111v20.38897778h19.6608c19.90352592 0.48545185 29.61256297-8.73813333 29.12711111-27.67075555v-71.96823704H662.49007408v-11.65084444z" p-id="4642" fill="#1296db"></path><path d="M436.87632592 499.49961482v-29.12711112h13.83537778v-19.6608h-13.83537778v-19.6608h13.1072v-20.38897778h-19.6608v-20.38897777H447.67762963v-19.6608h-17.47626666v-16.01991112h-28.39893334v16.01991112h-21.11715555v19.6608h21.11715555v20.38897777h-26.2144v20.38897778h33.49617778v54.49197038l-3.64088889-3.6408889-1.45635555-1.45635555v-40.04977778h-23.30168889v39.20023704c0.48545185 11.65084445-1.69908148 19.6608-6.5536 24.02986666v19.6608c11.65084445-5.33997037 19.6608-11.40811852 24.02986667-18.20444444 11.16539259 10.19448889 26.45712592 15.29173333 45.75383703 15.29173334H543.55437037v-19.6608h-88.59496296c-6.79632592 0.24272592-12.74311111-0.24272592-18.08308149-1.21362963zM663.7037037 355.56314075h-37.13706667v13.83537777h-63.95828148v21.11715556h165.78180742v-21.11715556H663.7037037z" p-id="4643" fill="#1296db"></path><path d="M510.66500741 15.01866667c-274.52302222 0-497.1026963 222.57967408-497.1026963 497.1026963 0 274.52302222 222.57967408 497.1026963 497.1026963 497.10269628 274.52302222 0 497.1026963-222.57967408 497.10269629-497.10269628 0-274.52302222-222.57967408-497.1026963-497.10269629-497.1026963z m-87.86678519 784.00474074c-28.64165925 0-51.82198518-23.18032592-51.82198519-51.82198519s23.18032592-51.82198518 51.82198519-51.82198519 51.82198518 23.18032592 51.82198519 51.82198519-23.18032592 51.82198518-51.82198519 51.82198519z m256.80402963 0c-28.64165925 0-51.82198518-23.18032592-51.82198518-51.82198519s23.18032592-51.82198518 51.82198518-51.82198519 51.82198518 23.18032592 51.82198518 51.82198519-23.18032592 51.82198518-51.82198518 51.82198519z m124.39703704-470.8882963l-49.51608889 218.69605926c-2.3058963 10.43721482-12.98583703 18.93262222-23.66577778 18.93262222H366.36444445l5.46133333 44.9042963h357.89937777c12.74311111 0 23.30168889 9.58767408 23.3016889 21.35988148 0 11.77220741-10.43721482 21.35988148-23.3016889 21.35988148H362.72355555c-1.57771852 0.48545185-3.2768 0.72817778-5.09724444 0.72817778h-4.36906666c-10.67994075 0-20.38897778-8.61677037-21.72397037-19.29671111l-44.41884445-366.27342222h-46.48201481c-12.74311111 0-23.30168889-9.58767408-23.3016889-21.35988148 0-11.77220741 10.43721482-21.35988148 23.3016889-21.35988149h55.46287407c1.57771852-0.48545185 3.39816297-0.72817778 5.21860741-0.72817778h4.36906667c10.67994075 0 20.38897778 8.61677037 21.72397036 19.29671112l7.88859259 64.92918518h453.65475556c10.67994075-0.12136297 17.47626667 8.37404445 15.04900741 18.81125926z" p-id="4644" fill="#1296db"></path></svg>
			</span>
			<span>超市</span>
		</div>
		<div class="min-block" id="hospital_part">
			<span id="hospital" value="医院" onclick="SearchHospital()">
				<svg t="1617977691325" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10878" width="48" height="48"><path d="M511.2 0C793.6 0 1022.432 228.864 1022.432 511.2c0 282.368-228.864 511.232-511.232 511.232C228.864 1022.4 0 793.568 0 511.2 0 228.864 228.864 0 511.2 0z m59.008 255.616h-235.968c-32 0-61.824 28.48-59.36 56.128l0.384 396.384H235.936v58.688h550.56V708.16h-19.68v-275.552c0-32.96-10.432-59.104-30.176-59.008-13.184 0.064-29.312 0.064-48.48 0V708.16h-58.976V314.592c0-30.08-20.672-57.024-55.488-58.88l-3.52-0.096z m-91.84 362.368v7.2c-2.304 7.392-4.96 15.232-8.032 23.52 4.768 8.192 7.328 15.232 7.744 21.248 0 4.224-0.768 7.296-2.368 9.152-2.464 2.272-6.592 3.424-12.608 3.52l-2.816-8.704v22.88h-8.96v-78.816h27.04z m50.464 36.64v8.64h-13.76v20.608c0 2.272 0.64 3.424 1.856 3.424h2.304c0.64 0 1.152-0.352 1.6-0.896 0.512-0.704 0.864-4.224 1.024-10.56l8.384 2.816c-0.704 8.288-1.664 13.216-2.72 14.624-1.248 1.312-3.36 2.016-6.368 2.112h-7.136c-2.624 0-4.576-0.864-5.792-2.624a10.24 10.24 0 0 1-2.24-6.72v-22.816h-5.696c-0.704 8.736-2.112 15.264-4.32 19.488a36.672 36.672 0 0 1-14.08 13.824l-5.92-7.68c5.44-2.976 9.44-6.4 11.712-10.464 1.856-3.264 3.104-8.288 3.616-15.168h-10.752v-8.64h48.288z m-91.712-36.64v8.704h-62.016v58.304h64.832v8.832h-73.728v-75.84h70.912z m-46.144 9.504l8.352 2.272c-0.608 1.856-1.216 3.52-1.824 5.12h32.96v8.384h-17.92v3.424c-0.064 1.92-0.256 3.776-0.512 5.536h23.584v8.64h-25.344a35.936 35.936 0 0 1-5.216 10.4c-4.384 5.632-11.52 9.952-21.472 13.024l-5.024-7.744c9.696-3.008 16.192-6.72 19.648-11.2a27.712 27.712 0 0 0 2.464-4.48h-21.504v-8.64h23.968c0.32-1.824 0.512-3.68 0.608-5.536v-3.424h-10.56a38.56 38.56 0 0 1-7.328 8.544l-6.784-6.272c5.568-5.12 9.536-11.2 11.904-18.048z m22.464 36.288c8.096 3.52 15.424 7.744 22.08 12.8l-4.992 7.648a96.48 96.48 0 0 0-21.664-13.664z m55.936-37.184h-9.088v46.784c1.92 0.256 3.52 0.448 4.864 0.448 1.6-0.192 2.624-0.448 3.232-0.96 0.544-0.544 0.8-1.504 0.8-2.912 0-5.92-2.624-12.512-7.744-19.84 3.36-8.704 5.984-16.544 7.936-23.52z m36.384-11.872c0.864 2.208 1.664 4.672 2.56 7.488h19.904v19.52h-7.136v5.472h-33.664v-5.44h-7.392v-19.552h18.848a45.76 45.76 0 0 0-2.656-5.92z m13.568 16.096h-30.4v8.192h30.4v-8.192z m-27.776-139.264v58.976h-157.312c1.184 0 1.184 0 0-0.096v-58.784l157.312-0.096z m78.656-117.984v59.008h-235.968c1.28 0 1.28-0.064 0-0.128v-58.784l235.968-0.096z" fill="#d81e06" p-id="10879"></path></svg>
			</span>
			<span>医院</span>
		</div>
	</div>
	
	<!-- 底部导航栏 -->
		<section class="tab_bar mui-bar mui-bar-tab">
			<!-- 周边 -->
			<a id="nearby_POI" href="#" class="a" data-index="1" onclick="nearbyPOI()">
				<div class="tab">
					<i class="iconfont icon-home"></i>
				</div>
			</a>
			<!-- 路线 -->
			<a href="routemap.html" class="a">
				<div class="tab middle">
					<svg t="1610615358184" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1392" width="64" height="64"><path d="M446.4 603.52l-318.848-77.568c-59.584-14.464-64.32-76-7.68-99.264L871.04 118.048c54.08-22.24 95.84 20.288 72.48 73.888l-237.6 545.6a38.016 38.016 0 1 1-69.728-30.4l217.696-499.84L216.32 469.28l270.24 65.728c13.632 3.328 24.32 13.856 27.84 27.456l80.256 310.912a38.016 38.016 0 1 1-73.6 19.008L446.4 603.52z" fill="#3D3D3D" p-id="1393"></path></svg>
				</div>
			</a>
			<!-- 个人中心 -->
			<a href="login.html" class="a" id="mine">
				<div class="tab">
					<i class="iconfont icon-my"></i>
				</div>
			</a>
		</section>
		<script>
		    let tab_middle = document.querySelector('.middle');
		    // console.log(tab_middle);	
		    tab_middle.addEventListener('click', (e) => {
		        tab_middle.classList.toggle('open');
		    });
			
			let nearby_POI=document.getElementById("nearby_POI");
			nearby_POI.addEventListener("click",(e)=>{
				nearby_POI.classList.toggle("open");
			});
		</script> 
</body>
</html>
<script>
	mui.init();
	mui.plusReady(function () {
		/**
		 * 监听UserInfo信息
		 */
		//获取全局user信息
		var userInfo=app.getUserGlobalInfo();
		
		//监听refresh
		window.addEventListener("refresh",function(){
			//初始化
			init();
		});
		
		//初始化地图
		init();
		
		//单击地图事件
		clickMap();
		
		//滑动地图方法
		moveMap();
	});
	
	
	/**
	 * 交通路况图层切换方法
	 */
	function convertTraffic(){
		var index=$("#layer").attr("data-index");
		if(index>0){
			//添加交通路况至图层
			map.addTileLayer(traffic);                    // 将图层添加到地图上
			$("#layer").css("background-image","linear-gradient(to top, #209cff 0%, #68e0cf 100%)");
		}else{
			map.removeTileLayer(traffic);                // 将图层移除
			$("#layer").css("background-image","none");
		}
		$("#layer").attr("data-index",index*(-1));
	}
	
	/**
	 * 卫星图层切换方法
	 */
	function convertEarth(){
		var index=$("#Earthlayer").attr("data-index");
		if(index>0){
			map.setMapType(BMAP_SATELLITE_MAP);	//混合模式开启
			$("#Earthlayer").css("background-image","linear-gradient(to top, #209cff 0%, #68e0cf 100%)");
		}else{
			map.setMapType(BMAP_NORMAL_MAP);		// 混合模式关闭
			$("#Earthlayer").css("background-image","none");
		}
		$("#Earthlayer").attr("data-index",index*(-1));
	}
	
	/**
	 * 单击周边事件
	 */
	function nearbyPOI(){
		if($("#nearPOI").css("display")=='none'){
			//展示弹窗
			$("#nearPOI").slideDown();
		}else{
			//隐藏弹窗
            $("#nearPOI").slideUp();
        }
	}
</script>